import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import { MediaInput } from '@zendeskgarden/react-forms';
import { MediaInputStory } from './stories/MediaInputStory';
import { commonArgs, commonArgTypes, fieldSubcomponents } from './stories/common';
import README from '../README.md';

<Meta
  title="Packages/Forms/MediaInput"
  component={MediaInput}
  subcomponents={{ ...fieldSubcomponents }}
  args={{
    start: true,
    end: true,
    ...commonArgs
  }}
  argTypes={{
    /* ensures the `validation` story arg for the `MediaInput` component is not overriden */
    ...{ ...commonArgTypes, validation: {} },
    disabled: { control: 'boolean' },
    readOnly: { control: 'boolean' },
    start: { control: 'boolean' },
    end: { control: 'boolean' },
    placeholder: { control: 'text' },
    type: {
      control: {
        type: 'select',
        options: [
          'date',
          'datetime-local',
          'email',
          'month',
          'number',
          'password',
          'search',
          'tel',
          'text',
          'time',
          'url',
          'week'
        ]
      }
    }
  }}
  parameters={{
    design: {
      allowFullscreen: true,
      type: 'figma',
      url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=103%3A20266'
    }
  }}
/>

# API

<ArgsTable />

# Demo

## Uncontrolled

<Canvas>
  <Story name="Uncontrolled" args={{ placeholder: 'Placeholder' }}>
    {args => <MediaInputStory {...args} />}
  </Story>
</Canvas>

## Controlled

<Canvas>
  <Story name="Controlled" args={{ value: 'Value' }}>
    {args => {
      const updateArgs = useArgs()[1];
      const handleChange = event => updateArgs({ value: event.target.value });
      return <MediaInputStory {...args} onChange={handleChange} />;
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
